<template>
	<view>
		<view class="allView" style="">
			<view class="" style="display: flex;flex-wrap: wrap;width: 200upx;background-color: rgb(247, 248, 250);">
				<view class="" v-for="(item,index) in shanpingtitleData" >
					<view v-if="istitleIndex==index" class="titleView" style="background-color: white;">
						{{item.serviceTypeName}}
					</view>
					<view v-else class="titleView"  @click="qiehuansptitle(item.serviceTypeId,index)">
						{{item.serviceTypeName}}
					</view>
				</view>
			</view>
			<scroll-view style="height: 90vh;" scroll-y="true" >
				<view class="" style="display: flex;flex-wrap: wrap;width: 700upx;">
					<view class=""  v-for="(item,index) in shanpingtitleData[istitleIndex].product" >
						<view class="" style="display: flex;margin:0 30upx ;padding: 10upx 0upx;border-bottom: 2upx solid #eee;">
							<view class="" >
								<img :src="item.productImage" style="width: 100upx;height: 100upx;" alt="" />
							</view>
							<view class="" style="margin-left: 10upx;width: 380upx;font-size: 26upx;line-height: 30upx;">
								<view class="" style="color:#070707;height: 64upx;">
									{{item.productName}}
								</view>
								<view class="" style="display: flex;justify-content: space-between;align-items: center;">
									<view class="" style="color: #f10516;">
										￥{{item.productPrice}}
									</view>
									<view class="" style="display: flex;">
										<view @click="addproductcountFC(0,index)" class="shuliangView" style="font-weight: bold;font-size: 28upx;">
											-
										</view>
										<view class="shuliangView" style="">
											{{item.count}}
										</view>
										<!-- linear-gradient  background-color: rgb(0, 171, 248);-->
										<view @click="addproductcountFC(1,index)" class="shuliangView" style="font-weight: bold;font-size: 28upx;">
											+
										</view>
										
									</view>
								</view>
							</view>
							
						</view>
						
						
					</view>
				</view>
				
			</scroll-view>
		</view>
		
		<view class="hejiView">
			<view class="" style="width: 690upx;display: flex;justify-content: space-between;color: white;">
				<view class="heijiView" style="">
						<uni-icons type="cart" size="30" color="white"></uni-icons>
					<view class="" style="margin-top: -60upx;margin-left: -38upx;">
						<uni-section title="偏移: offset 属性(存在 aboslute)" type="line" padding>
							<uni-badge class="uni-badge-left-margin" :text="hejicount" type="error" absolute="rightTop" :offset="[-3, -3]" size="small">
								
							</uni-badge>
						</uni-section>
					</view>
					
					<view class="">
						合计：{{(hejiNum).toFixed(2)}}
					</view>
				</view>
				<view class="xuanhaole" style="" @click="xuanhaoFC()">
					选好了
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				shanpingtitleData:"",
				hejiNum:0,
				hejicount:0,
				
				istitleIndex:0,
				// roomProductEntityList:[],//不重复
				roomProductList:[],//重复
				
				isFangjianIndex:0,//哪一个房间下增加的产品
				Oshanpingdata:"",//前一个页面的shanpingdata
				OspNum:0,
			};
		},
		onLoad(options) {
			console.log(options)
			this.isFangjianIndex=parseInt(options.isFangjianIndex)
			if(parseInt(options.PhejiNum)&&options.PshanpingtitleData && options.hejiNum2){
				this.hejiNum=parseInt(options.PhejiNum)
				this.hejicount=parseInt(options.hejiNum2)
				this.shanpingtitleData=JSON.parse(options.PshanpingtitleData)
			}else{
				if(options.shanpingdata){
					this.Oshanpingdata=JSON.parse(options.shanpingdata)
					this.OspNum=this.Oshanpingdata.length
					console.log(this.OspNum,this.Oshanpingdata)
				}
				this.getProductClassByServiceIdFC(options.id)
			}
			// this.hejicount=options.hejiNum2
			
		},
			
		methods:{
			// 根据服务id获取其下的产品分类
			getProductClassByServiceIdFC: async function(id){
				const getProductClassByServiceId = await this.$ajax.getProductClassByServiceId({
					id:id
				})
				this.shanpingtitleData=getProductClassByServiceId.data.data
				console.log("getProductClassByServiceId",getProductClassByServiceId.data.data)
				if(getProductClassByServiceId.data.data.length && getProductClassByServiceId.data.data[0].serviceTypeId){
					this.istitleIndex=0
					this.getProductByClassIdFC(getProductClassByServiceId.data.data[0].serviceTypeId)
				}
				
			
			},
			// 根据产品类别id获取其下的具体产品
			getProductByClassIdFC: async function(id){
				const getProductByClassId = await this.$ajax.getProductByClassId({
					id:id,
					pageNum: 1,
					pageSize: 50,//暂时
				})
				for(var i=0;i<getProductByClassId.data.data.length;i++){
					getProductByClassId.data.data[i].count=0
					for(var j=0;j<this.Oshanpingdata.length;j++){
						if(this.OspNum!=0 && this.Oshanpingdata[j].product.productId==getProductByClassId.data.data[i].productId){
							getProductByClassId.data.data[i].count+=this.Oshanpingdata[j].count
							this.OspNum-=1
						}
					}
					
				}
				// this.shanpingdata=getProductByClassId.data.data
				if(!this.shanpingtitleData[this.istitleIndex].product){
					this.shanpingtitleData[this.istitleIndex].product=getProductByClassId.data.data
				}
				// console.log(this.istitleIndex,this.shanpingdata)
				this.$forceUpdate()
			},
			
			qiehuansptitle(id,index){
				this.istitleIndex=index
				this.getProductByClassIdFC(id)
				// this.hejiNum=0
				// this.hejicount=0
			},
			
			
			addproductcountFC(isshow,index){
				var shanpingdata=this.shanpingtitleData[this.istitleIndex].product
				if(isshow==0 && shanpingdata[index].count>0){
					shanpingdata[index].count=1
					this.hejicount-=1
					this.hejiNum=(this.hejiNum*100-parseInt(shanpingdata[index].productPrice*100))/100
				}else if(isshow==1){
					shanpingdata[index].count+=1
					this.hejicount+=1
					this.hejiNum=(this.hejiNum*100+parseInt(shanpingdata[index].productPrice*100))/100
					
				}
				
				
			},
			xuanhaoFC(){
				console.log("shanpingdata-----：",this.shanpingtitleData[this.istitleIndex].shanpingdata)
				var s=0
				var t=0
				for(var i=0;i<this.shanpingtitleData.length;i++){
					if(this.shanpingtitleData[i].product){
						for(var j=0;j<this.shanpingtitleData[i].product.length;j++){
							// console.log(i,j)
							if(this.shanpingtitleData[i].product[j].count!=0){
								// console.log(s)
								this.roomProductList[s]={}
								this.roomProductList[s].product=this.shanpingtitleData[i].product[j]
								this.roomProductList[s].count=this.shanpingtitleData[i].product[j].count
								s+=1
								// for(var k=this.shanpingtitleData[i].shanpingdata[j].productcount;k>0;k--){
								// 	this.roomProductEntityList[t]=this.shanpingtitleData[i].shanpingdata[j]
								// 	t+=1
								// }
							}
						}
					}
					
				}
				
				console.log("roomProductList",this.roomProductList)
				const pages = getCurrentPages()//获取所有实例
				const previousPageS = pages[pages.length-2]//当前页面的上一个页面
				previousPageS.$vm.roomEntityList[this.isFangjianIndex].roomProductList=this.roomProductList
				previousPageS.$vm.isFangjianIndex=this.isFangjianIndex
				previousPageS.$vm.shanpingdata=this.roomProductList
				previousPageS.$vm.hejiNum1=this.roomProductList.length
				previousPageS.$vm.hejiNum2=this.hejicount
				
				previousPageS.$vm.PshanpingtitleData[this.isFangjianIndex]=this.shanpingtitleData
				previousPageS.$vm.PhejiNum=this.hejiNum
				this.$forceUpdate() //强制渲染
				uni.navigateBack({
					delta: 1
				})
			}
			
			
		}
	}
</script>

<style>
	.allView{
		display: flex;
		align-items: flex-start;
		width: 690upx;
		padding: 0upx 30upx 0 0upx;
	}
	.titleView{
		width: 200upx;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: white; */
	}
	.shuliangView{
		background-color: rgb(242, 243, 245);
		padding: 0 10upx;
		margin: 0 5upx;
	}
	
	.hejiView{
		position: fixed;
		width: 690upx;
		bottom:0upx;
		height: 100upx;
		background-color: white;
		padding: 0 30upx;
	}
	
	.uni-badge-left-margin {
		margin-left: 10px;
		
	}
	.heijiView{
		background-color: rgb(0, 185, 250);
		width: 410upx;
		display: flex;
		height: 8vh;
		align-items: center;
		border-top-left-radius: 50upx;
		border-bottom-left-radius: 50upx;
		padding-left: 100upx;
		
		
	}
	.xuanhaole{
		background-color: rgb(32, 116, 250);
		width: 180upx;
		border-top-right-radius: 50upx;
		border-bottom-right-radius: 50upx;
		height: 8vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	
</style>
